import { FormOutlined, SyncOutlined, TeamOutlined } from '@ant-design/icons';
import { Tree, Popover, Card, message } from 'antd';
import React from 'react';
import './index.css';
import { useHistory } from 'react-router';
import { fetchRequest } from '../../../utils/Request';
import { url } from '../../../utils/url';
import { useDispatch, useSelector } from 'react-redux';
import { actionTypes } from '../../DepartmentManage/actionTypes';
import { useRequest } from '@umijs/hooks';
import actionType from '../actionType';


export default function DepartmentTree() {

    const history = useHistory();

    const dispatch = useDispatch();


    const getOrz = useRequest(getDept, {
        loadingDelay: 200
    })

    //得到组织机构的信息
    async function getDept() {
        try {
            const json = await fetchRequest(url.GET_ALL_DEPT, "");
            if (json.success) {
                deleteEmpty(json.deptData)
                dispatch({ type: actionTypes.GET_DEPT_TABLE, payload: json.deptData })
                if (json.deptData.length > 0) {
                    // dispatch({type:actionTypes.})
                    dispatch({ type: actionType.SET_PARAMS, payload: { deptID: json.deptData[0].deptID } })
                }
                // console.log(json.deptData)
            } else {
                message.destroy();
                message.error(json.error);
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message)
        }
    }


    //获取redux中的数据
    const deptData = useSelector((state: any) => {
        return {
            ...state.deptManage,
            ...state.devManage.requestParams
        }
    })

    // console.log(deptData)


    //递归删除空的children
    function deleteEmpty(arr: any[]) {
        arr.map(item => {
            if (item.children.length === 0) {
                item.switcherIcon = <TeamOutlined />
                delete item.children
            } else {
                deleteEmpty(item.children)
            }
        })
    }

    // console.log(deptData)

    return (
        <Card style={{ height: '100%', overflow: "auto" }} loading={getOrz.loading} className="dept-tree">
            <div className="dept-tree-header"><span className="header-name">组织机构</span>
                <span className="header-button">
                    <Popover content="编辑部门">
                        <FormOutlined className="button" style={{ marginRight: '10px' }} onClick={() => history.push("/homepage/systemManage/deptManage")} />
                    </Popover>

                    <Popover content="刷新">
                        <SyncOutlined className="button" onClick={() => getOrz.run()} />
                    </Popover>
                </span>


            </div>
            {/* <br/> */}
            <Tree showIcon selectedKeys={[deptData.deptID]} onSelect={value => { if (value.length > 0) dispatch({ type: actionType.SET_PARAMS, payload: { deptID: value[0] } }) }} treeData={deptData.deptData} showLine defaultExpandAll style={{ marginTop: '5px', padding: '0 5px 20px 5px' }} />
        </Card>
    )
}
